<!DOCTYPE html>
<html lang="zh-cn">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="./css/index.css" />
    <title>记事本</title>
    <!-- 
      【思路一:列表渲染】
      步骤一:因为列表要显示多条，所以定义一个数组把多条数据存起来。
      步骤二:然后再对着li进行v-for,根据这个数组来渲染。
      步骤三:使用插值语法,更改需要渲染的标题、序号。
      【思路二:数据新增】
      步骤四:需要拿到输入框的内容,在input输入框中使用v-model双向绑定,绑定的元素需要在data中定义。
      步骤五:因为按回车就添加,意为着输入框要加事件keyup,并且只能由enter键触发。
      步骤六:按回车不能直接添加到数组里,因为可能没有输入内容,所以要做一个非空判断。
      步骤七:不为空,则添加到数组中。
      步骤八:添加到数组后,就把输入框内容清除。
      (这时候可以把步骤一定义的数组死数据删掉,让列表数据展示我们输入的内容。步骤九:完善“空空如也”显示。
      【思路三:数据删除】
      步骤十:给“删除按钮”添加点击事件。
      步骤十一:给“清空按钮”添加点击事件,设置点击时将数组全部重新赋值为空数组,则数据全部清空。

      【思路四:数据统计】
      步骤十二:统计合计,就是统计数组的长度。 -->


  </head>
  <body>
    <div id="app">
      <h2>记事本</h2>

      <div class="main">
        <input type="text" v-model="inputValue" @keyup.enter="add" autofocus="autofocus" autocomplete="off" placeholder="请输入目标"/>
        <!-- autocomplete属性：默认on。退出之后输入内容消失，双击有记录。 -->
        <!-- autofocus属性：不用用户按鼠标就可以直接聚焦。适用于所有<input>标签的类型。 -->
        <ul>
          <li v-for="(item,index) in list">
            <div class="content"><span>{{ index+1 }}.</span>
            <label>{{ item }}</label> 
            </div>
            <button @click="remove(index)">❌</button>
          </li>
        </ul>
        <p class="empty">空</p>
      </div>
      <div class="bottom">
        <span v-if="list.length!=0" v-show="list.length!=0">
           统计:<strong>{{ list.length }}</strong>  <!--加粗 -->
        </span>
        <span v-show="list.length!=0" @click="clear">清空</span>
        
      </div>
    </div>
    
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script>
      new Vue({
        el: '#app',
        data: {
            list: ["每天", "一个", "小技巧"],
            inputValue: "好好学习,天天向上"
        },
        methods: {
            add: function () {
                this.list.push(this.inputValue);
            },
            remove: function (index) {
                console.log("删除");
                console.log(index);
                this.list.splice(index, 1);
            },
            clear: function () {
                this.list = [];
            }
        },

      })
    </script>
  </body>
</html>
